import React, { useMemo } from 'react';
import _ from 'lodash';
import { connect, history } from 'umi';
import { Menu } from 'antd';
import SystemName from '@/components/SystemName';
import Breadcrumb from './components/breadcrumb';
import Avatar from './components/avatar';
import HeaderSearch from './components/headerSearch';
import RouteTagMenu from './components/routeTagMenu';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
import { getOriginalPath } from '@/utils/routeFormat';
import './index.less';
import { formatTree } from '@/utils/utils';

export default connect(
  ({ global, menu }) => ({
    pathname: menu.pathname,
    collapsed: global.collapsed,
    drawerMenuVisible: global.drawerMenuVisible,
  }),
  (dispatch) => ({
    userLogout: () => dispatch({ type: 'user/logout' }),
    toggleDrawerMenuVisible: (payload) =>
      dispatch({ type: 'global/toggleDrawerMenuVisible', payload }),
  }),
)(
  ({
    layout,
    theme,
    isMobile,
    collapsed,
    navTheme,
    siderWidth,
    primaryColor,
    menuData,
    pathname,
    menuRender,
    drawerMenuVisible,
    menuHeaderRender,
    userLogout,
    toggleDrawerMenuVisible,
  }) => {
    const fillBackgroundColor = theme === 'dark' && layout === 'top';
    const systemTextColor =
      navTheme === 'realDark' || fillBackgroundColor ? null : 'rgba(0,0,0,.8)';
    const currentMenuData = useMemo(
      () =>
        formatTree(menuData, ({ id, key, icon, title, label, path }) => ({
          id,
          key,
          icon,
          title,
          label,
          path,
        })),
      [menuData],
    );

    // 退出登录
    const systemLogout = () => {
      userLogout();
      history.replace('/login');
    };

    return (
      <>
        <div
          className="ant-pro-global-header ant-pro-global-header-layout-side"
          style={_.assign(
            { height: '48px' },
            isMobile || layout !== 'side' ? { paddingLeft: 0 } : null,
            fillBackgroundColor ? { backgroundColor: '#001529' } : null,
            navTheme === 'realDark'
              ? { borderBottom: '0.5px solid rgba(143, 132, 117, 0.1)' }
              : null,
          )}
        >
          {isMobile || (layout !== 'side' && menuHeaderRender !== false) ? (
            <SystemName
              systemTextWidth={siderWidth - 72}
              textColor={systemTextColor}
              collapsed={isMobile || collapsed}
            />
          ) : null}
          {isMobile ? (
            <div
              title="切换菜单显示/隐藏"
              className={`menu-collapsed-toggle-button ${
                fillBackgroundColor ? 'menu-collapsed-toggle-fill-background' : ''
              }`}
              onClick={() => {
                toggleDrawerMenuVisible(!drawerMenuVisible);
              }}
            >
              {drawerMenuVisible ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />}
            </div>
          ) : layout === 'top' ? (
            <div style={{ flex: '1 1 0%' }} className="ant-pro-top-nav-header-menu">
              <Menu
                mode="horizontal"
                items={currentMenuData}
                theme={fillBackgroundColor ? 'dark' : 'light'}
                selectedKeys={getOriginalPath(pathname)}
                onClick={({ key }) => {
                  if (getOriginalPath(pathname) !== key) {
                    history.push(key);
                  }
                }}
              />
            </div>
          ) : (
            <div style={{ flex: '1 1 0%' }}>
              <Breadcrumb />
            </div>
          )}
          <div
            className={`system-header-right-container ${
              fillBackgroundColor ? 'system-header-right-container-fill-background' : null
            }`}
          >
            <HeaderSearch />
            <Avatar systemLogout={systemLogout} />
          </div>
        </div>
        <RouteTagMenu
          primaryColor={primaryColor}
          isDark={navTheme === 'realDark'}
          isMenuRender={menuRender !== false}
          positionLeft={
            layout !== 'mix' || isMobile || menuRender === false ? 0 : collapsed ? 60 : siderWidth
          }
        />
      </>
    );
  },
);
